<template>
	<view class="historyPrice">
		<navBar><template #title>添加挂单</template></navBar>
		<view class="secureCase">
			<!-- 今日koi转换价格 -->
			<view class="priceCard">
				<image class='img' src="/src/static/images/Banner-2.png" mode=""></image>
				<view class="title">今日KOI价格</view>
				<view class="convertPrice">
					{{convertPrice}}
					<view class='rose fall'></view>
				</view>
			</view>
			<view class="priceList">
				<view class="item" v-for='item in priceList' :key='item.id'>
					<view class="date">
						{{new Date(item.createTime).getMonth() + 1}}月{{new Date(item.createTime).getDate()}}日</view>
					<view class='price'>
						<view>1KOI = {{item.price.toFixed(5)}} USDT</view>
						<view :class="item.status?'rose':'fall'"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang='ts'>
	import {
		ref,
		onMounted
	} from 'vue'
	import navBar from '@/components/mine/navBar/index.vue'
	import {
		CionPriceList
	} from '@/api/CionPriceList'

	const convertPrice = ref('1KOI = 1.1111 USDT')

	const priceList = ref([])
	// {
	// 	id: 1,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 2,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 3,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: true
	// }, {
	// 	id: 4,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 5,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 6,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 7,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 8,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// }, {
	// 	id: 9,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: true
	// }, {
	// 	id: 10,
	// 	date: '11月16日',
	// 	price: '1KOI = 1.1111 USDT',
	// 	isRose: false
	// } 

	const getCionPriceList = async () => {
		const data = await CionPriceList({})
		console.log(data)
		priceList.value = data.rows
	}

	onMounted(() => {
		getCionPriceList()
	})
</script>

<style scoped lang="scss">
	.historyPrice {
		min-height: 100vh;

		.priceCard {
			position: relative;
			margin-top: 184px;
			height: 240px;
			padding: 54px 0;
			background: linear-gradient(170deg, #06FFDD 0%, #4E47FF 100%);
			border-radius: 16px;
			box-sizing: border-box;
			// box-shadow: 0 -10px 50px black;
			text-align: center;
			color: white;

			.img {
				position: absolute;
				top: -140px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 0;
				height: 142px;
			}

			.title {
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 40px;
				letter-spacing: 1px;
			}

			.convertPrice {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 16px;
				font-size: 60px;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 70px;

				.rose {
					width: 32px;
					height: 40px;
					margin-left: 16px;
					background: rgba(0, 208, 185, 1);
					clip-path: polygon(30% 100%, 30% 40%, 0 40%, 50% 0, 100% 40%, 70% 40%, 70% 100%);
				}

				.fall {
					width: 32px;
					height: 40px;
					margin-left: 16px;
					background: rgba(250, 100, 0, 1);
					clip-path: polygon(30% 0%, 30% 60%, 0 60%, 50% 100%, 100% 60%, 70% 60%, 70% 0%)
				}
			}
		}

		.priceList {
			margin-top: 32px;
			color: white;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 72px;
				margin-bottom: 16px;
				height: 88px;
				font-size: 28px;
				background: #2a2b2e;
				border-radius: 16px;
				box-sizing: border-box;

				.date {
					color: rgba(191, 191, 192, 1);
				}

				.price {
					display: flex;
					align-items: center;

					.rose {
						width: 19px;
						height: 24px;
						margin-left: 32px;
						background: #00D0B9;
						clip-path: polygon(30% 100%, 30% 40%, 0 40%, 50% 0, 100% 40%, 70% 40%, 70% 100%);
					}

					.fall {
						width: 19px;
						height: 24px;
						margin-left: 32px;
						background: #FA6400;
						clip-path: polygon(30% 0%, 30% 60%, 0 60%, 50% 100%, 100% 60%, 70% 60%, 70% 0%)
					}
				}
			}
		}
	}
</style>